import * as React from 'react'
import { Toast } from 'antd-mobile'
import { NavBar, Button, Icon } from 'components'
import { post } from '../../../utils'
import './EditPsw.less'

export default class EditPsw extends React.Component<any, any> {
    public state = {
        psw: '',
        pswInputType: 'password',
        isError: false,
        btnSubmit: true
    }
    public render(): JSX.Element {
        const { psw, pswInputType, isError, btnSubmit } = this.state
        return (
            <div className="editPsw">
                <NavBar fixed={true} title={<div style={{ fontSize: '0.97rem', color: '#222' }}>修改登录密码</div>} />
                <div className="editPsw_inptuWrap">
                    <p>请设置新的登录密码</p>
                    <div className="editPsw_inptuWrap_input">
                        <input
                            maxLength={18}
                            placeholder="请输入6-20位数字/字母/字符组合"
                            type={pswInputType}
                            value={psw}
                            onChange={this.handleInputPsw}
                            onBlur={this.handleCheckPsw}
                        />
                        <div className="editPsw_inptuWrap_input_right_icon">
                            {
                                (psw.length > 0)
                                    ? <span style={{ color: '#aaa', position: 'absolute', left: '-0.5rem', top: '0' }}>
                                        <Icon type="error" onClick={this.handleClearPswtInput} />
                                    </span>
                                    : ''
                            }
                            {this.handlePswIcon()}
                        </div>
                    </div>
                </div>
                {
                    (isError)
                        ? <div className="editPsw_errorInfo"><Icon type="sigh_circle" />登录密码格式错误</div>
                        : null
                }
                <div className="editPsw_operation">
                    <Button className="editPsw_operation_btn" disabled={btnSubmit} onClick={this.handleSubmit}>确认</Button>
                </div>
            </div>
        )
    }
    private handleInputPsw = (e: any) => {
        const val = e.target.value
        this.setState({
            psw: val
        })
    }

    private handleCheckPsw = () => {
        const { psw } = this.state
        // const reg1 = /[!@#$%^&*()_?<>{}]{1}/
        const reg2 = /([a-zA-Z0-9!@#$%^&*()_?<>{}]){6,20}/
        const reg3 = /[a-zA-Z]+/
        const reg4 = /[0-9]+/
        let status = true
        if (!psw || psw.length === 0) {
            Toast.info('请输入密码！', 1)
            status = false
        } else if (!reg2.test(psw)) {
            Toast.info('密码长度在8-18位', 1)
            status = false
        } else if (!reg3.test(psw)) {
            Toast.info('密码需含有字母', 1)
            status = false
        } else if (!reg4.test(psw)) {
            Toast.info('密码需含有数字', 1)
            status = false
        }
        this.setState({
            isError: !status,
            btnSubmit: !status
        })
    }
    private handlePswIcon = () => {
        const { pswInputType } = this.state
        if (pswInputType === 'text') {
            return (
                <span>
                    <Icon type="show_eye" style={{ color: '#aaaaaa' }} onClick={this.showPsw} />
                </span>
            )
        } else {
            return (
                <span>
                    <Icon type="hide_eye" style={{ color: '#aaaaaa' }} onClick={this.showPsw} />
                </span>
            )
        }
    }
    private handleClearPswtInput = () => {
        this.setState({
            psw: ''
        })
    }
    private showPsw = () => {
        const { pswInputType } = this.state
        this.setState({
            pswInputType: (pswInputType === 'text') ? 'password' : 'text'
        })
    }

    private handleSubmit = () => {
        const { userInfo, SET_USER_INFO, history } = this.props
        const { psw } = this.state

        post('usersapi/findUserPwd', {
            id: userInfo.id,
            phone: userInfo.phone,
            pwd: psw
        }).then(() => {
            Toast.info('密码修改成功', 1)
            setTimeout(
                () => {
                    SET_USER_INFO({})
                    history.push('/loginMode')
                },
                1000
            )
        })
    }
}